import React, { useEffect, useState, useRef, forwardRef, useImperativeHandle } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { headerTitleBackground } from './Icons';
import Button from './Button';
import styles from './item.module.less';

const Item = forwardRef((props, ref) => {
  const { className, style, onlyOne, children, tag, title, onDockChange } = props;

  const rootRef = useRef(null);

  const [fullScreen, setFullScreen] = useState(false);

  useEffect(() => {
    // TODO why not use style={style} ??
    ref?.current.setStyle(style);
  }, [style]);

  useImperativeHandle(ref, () => ({
    setStyle: (ss) => {
      rootRef.current.style.gridRowStart = ss.gridRowStart;
      if (ss.gridRowEnd) rootRef.current.style.gridRowEnd = ss.gridRowEnd;
      rootRef.current.style.gridColumnStart = ss.gridColumnStart;
      if (ss.gridColumnEnd) rootRef.current.style.gridColumnEnd = ss.gridColumnEnd;
    },
    setFullScreen: (bo) => {
      setFullScreen(bo);
    },
  }));

  return (
    <div ref={rootRef} className={classnames(styles.root, className, fullScreen ? styles.fullScreen : null)}>
      <div className={styles.header}>
        <Button
          background="headerLeftBackground"
          icon="left"
          style={fullScreen || onlyOne ? { visibility: 'hidden' } : null}
          onClick={() => {
            onDockChange({ ref, to: 'left', tag });
          }}
        />
        <div className={styles.title}>
          <div className={styles.center}>
            {headerTitleBackground}
            <div className={styles.centerTitle}>{title}</div>
          </div>
          <div className={styles.side}>
            <Button
              background="leafLeftBackground"
              icon={!fullScreen ? 'fullScreenEnter' : 'fullScreenExit'}
              style={onlyOne ? { visibility: 'hidden' } : null}
              onClick={() => {
                onDockChange({ ref, to: 'fullScreen', tag, fullScreen });
              }}
            />
            <Button
              background="leafRightBackground"
              icon="close"
              onClick={() => {
                onDockChange({ ref, to: 'close', tag });
              }}
            />
          </div>
        </div>
        <Button
          background="headerRightBackground"
          icon="right"
          style={fullScreen || onlyOne ? { visibility: 'hidden' } : null}
          onClick={() => {
            onDockChange({ ref, to: 'right', tag });
          }}
        />
      </div>
      {children}
      {/* <div className={styles.content}>
        {children}
      </div> */}
    </div>
  );
});

Item.defaultProps = {
  className: null,
  style: null,
  onlyOne: false,
  children: null,
  tag: null,
  title: null,
  onDockChange: () => {},
};

Item.propTypes = {
  className: PropTypes.any,
  style: PropTypes.any,
  onlyOne: PropTypes.bool,
  children: PropTypes.any,
  tag: PropTypes.any,
  title: PropTypes.any,
  onDockChange: PropTypes.func,
};

export default Item;
